<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>js-demo</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="app">
  	<!-- 浮动 -->
    <div class="box_1">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        
        <h1>float</h1>
        <div>asdasd</div>
      </div>

    </div>
    <!-- 定位 -->
    <div class="box_2">
      <div class="left"></div>
      <div class="center">
        
        <h1>position</h1>
        <div>asdasd</div>
      </div>
      <div class="right"></div>
    </div>
    <!-- flex -->
    <div class="box_3">
      <div class="left"></div>
      <div class="center">
        
        <h1>flex</h1>
        <div>asdasd</div>
      </div>
      <div class="right"></div>
    </div>
    <!-- table -->
    <div class="box_4">
      <div class="left"></div>
      <div class="center">
        
        <h1>table</h1>
        <div>asdasd</div>
      </div>
      <div class="right"></div>
    </div>
    <!-- table -->
    <div class="box_5">
      <div class="left"></div>
      <div class="center">
        
        <h1>gird</h1>
        <div>asdasd</div>
      </div>
      <div class="right"></div>
    </div>



    <div class="flex_learn">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
      <div class="right">right</div>
      <div class="right">right</div>
    </div>
  </div>
  <!-- JQ -->
  <script src="../../scripts/libs/jquery/jquery.js" type="text/javascript"></script>
  <script src="./index.js" type="text/javascript"></script>
</body>

</html>
